import viewObject from '@/compontent/viewObject';
import moveEvent from '@/util/moveEvent'


var viewObjectList = {
    module: [{
        icon: 'fa-square',
        name: '块元素',
        event: viewObject,
    }],
};

var eles = function () {
    this.BoardViewMark = $('<div></div>');
    this.markEle = $('<div class="markEle"></div>').hide();
    this.html = $(`<div class="p_abs original"><div class="moveBar"></div></div>`);
    this.moveBar = this.html.find('.moveBar');
    this.moveBar.css({ left: 'auto', right: 1 });
    this.children = {
        module: { swith: $('<div class="fold_Swith"><i>▶</i>原件</div>'), body: $('<div class="fold_body"></div>'), },
        icon: { swith: $('<div class="fold_Swith"><i>▶</i>图标</div>'), body: $('<div class="fold_body"></div>'), },
        custom: { swith: $('<div class="fold_Swith"><i>▶</i>自定义组件</div>'), body: $('<div class="fold_body"></div>') },
    };
    var _this = this;
    for (const key in this.children) {
        if (this.children.hasOwnProperty.call(this.children, key)) {
            const element = this.children[key];
            var layout = $('<div class="fold_Layout"></div>').appendTo(this.html);
            layout.append(element.swith);
            layout.append(element.body);
            element.swith.click(function () {
                _this.swithActive(this);
            });
        }
    };
    this.viewStatus = {};
    this.viewObject = null;
    for (const key in viewObjectList) {
        if (viewObjectList.hasOwnProperty.call(viewObjectList, key)) {
            const element = viewObjectList[key];
            for (let i = 0; i < element.length; i++) {
                const item = element[i];
                const _item = $(`<div class="viewObject-sign"><div class="viewObject-sign-img"><i class="fa ${item.icon}"></i></div><div class="viewObject-sign-name">${item.name}</div></div>`);
                _item.mousedown((e) => {
                    _this.viewStatus.startMouseListener(item.event);
                    var _top = e.pageY;
                    var _left = e.pageX;
                    this.markEle.show();
                    this.markEle.css({
                        top: _top,
                        left: _left
                    });
                    this.markEle.append(_item.clone());
                    moveEvent(e, (left, top) => {
                        this.markEle.css({
                            top: top + _top,
                            left: left + _left
                        });
                    }, e => {
                        this.markEle.empty().hide();
                    });
                });
                this.children[key].body.append(_item);
            };
        }
    };
};

eles.prototype.setViewStatus = function (data) {
    this.viewStatus = data;
};

eles.prototype.swithActive = function (e) {
    var layout = $(e).parent();
    this.renderBlockHeight();
    if (!layout.hasClass('.active')) {
        var height = this.html.height();
        var blockHeight = height - (25 * 2);
        this.html.find('.fold_Layout').removeClass('active').height(25);
        layout.height(blockHeight).addClass('active');
    };
};

eles.prototype.renderBlockHeight = function () {
    var height = this.html.height();
    var blockHeight = height - (25 * 3) - 1;
    for (const key in this.children) {
        if (this.children.hasOwnProperty.call(this.children, key)) {
            const element = this.children[key];
            element.body.css({
                height: blockHeight
            });
        }
    };
};
eles.prototype.init = function () {
    this.renderBlockHeight();
    this.children.module.swith.click();
};

eles.prototype.getChangeMoveBarOptions = function () {
    return {
        width: this.html.width(),
        height: this.html.height(),
        top: parseInt(this.html.css('top')),
        left: parseInt(this.html.css('left')),
        bottom: parseInt(this.html.css('bottom')),
        right: parseInt(this.html.css('right')),
    };
};

eles.prototype.changeMoveBarEvent = function (left, top, sign) {
    var width = sign.width + left;
    var ww = $(document).width()
    if (width < 210) width = 210;
    if (width > ww / 3) width = ww / 3;
    this.html.width(width);
};

export default eles;